<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="${pageContext.request.contextPath}/"><h1>
					<img src="${pageContext.request.contextPath}/images/logo.png"
						alt="" />
				</h1></a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<div class="top-search">
				<form class="navbar-form navbar-right" action="${pageContext.request.contextPath}/video/findByName" method="post">
					<input type="text" class="form-control" placeholder="搜索..." name="content">
					<input type="submit" value=" ">
				</form>
			</div>
			<div class="header-top-right">
			<c:choose>
			<c:when test="${username == null }">
				<div class="signin">
					<a href="#small-dialog2" class="play-icon popup-with-zoom-anim">注册</a>
					<!-- pop-up-box -->
									<script type="text/javascript" src="${pageContext.request.contextPath}/js/modernizr.custom.min.js"></script>    
									<link href="${pageContext.request.contextPath}/css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
									<script src="${pageContext.request.contextPath}/js/jquery.magnific-popup.js" type="text/javascript"></script>
									<!--//pop-up-box -->
									<div id="small-dialog2" class="mfp-hide">
										<h3>创建账号</h3> 
										<div class="signup">
										<p>你已经有一个账号? <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
										<input type="text" id="username_register" class="email" placeholder="账号必须字母和数字组合，首位为字母，长度6-12位" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?" name="username"/><span id="check_username" style="color:red;">
										<input type="password" id="password_register" placeholder="密码长度为6-12位" required="required" pattern=".{6,}" title="Minimum 6 characters required" autocomplete="off"  name="password"/><span id="check_password" style="color:red;">
										<button class="btn btn-info add_submit" type="submit">注册</button>
										<span id="addMsg" style="color:red;"></span>
											<!--  <a href="#small-dialog3" class="hvr-shutter-out-horizontal play-icon popup-with-zoom-anim">注册</a>-->
										</div>
										<div class="clearfix"> </div>
									</div>	
									<script>
											$(document).ready(function() {
											$('.popup-with-zoom-anim').magnificPopup({
												type: 'inline',
												fixedContentPos: false,
												fixedBgPos: true,
												overflowY: 'auto',
												closeBtnInside: true,
												preloader: false,
												midClick: true,
												removalDelay: 300,
												mainClass: 'my-mfp-zoom-in'
											});
																											
											});
									</script>	
				</div>
				<div class="signin">
					<a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a>
					<div id="small-dialog" class="mfp-hide">
						<h3>登录</h3>
						<div class="signup">
							<p>创建用户? <a href="#small-dialog2" class="play-icon popup-with-zoom-anim">注册</a></p>
							<input type="text" class="email" id="input_username" placeholder="输入你的账号" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"/>
							<input type="password" id="input_password" placeholder="密码" required="required" pattern=".{6,}" title="密码最少为6位" autocomplete="off" />
							<button class="btn btn-info login_submit">登录</button>
							<span id="loginMsg" style="color:red;"></span>
							<div class="forgot">
								<a href="#">忘记密码 ?</a>
							</div>
							<script>
								$(document).ready(function() {
									$('.popup-with-zoom-anim').magnificPopup({
										type : 'inline',
										fixedContentPos : false,
										fixedBgPos : true,
										overflowY : 'auto',
										closeBtnInside : true,
										preloader : false,
										midClick : true,
										removalDelay : 300,
										mainClass : 'my-mfp-zoom-in'
									});

								});
							</script>
						</div>
					</c:when>
					<c:otherwise>
						<span style="padding-right: 10px; font-size: 15px;">欢迎：${loginuser.nickname }</span>
						<ul class="nav navbar-nav navbar-right">
							<li class="dropdown">
								<button href="#" class="dropdown-toggle btn btn-default"
									data-toggle="dropdown">
									<b class="caret"></b>
								</button>
								<ul class="dropdown-menu dropdown-menu-xx">
									<c:choose>
										<c:when test="${loginuser.type == 2 }">
											<li><a href="${pageContext.request.contextPath}/admin/center">管理系统</a></li>
										</c:when>
										<c:otherwise>
											<li><a href="${pageContext.request.contextPath}/users/update?username=${username}">个人中心</a></li>
											<li><a href="${pageContext.request.contextPath}/users/findByUserName?username=${username}">视频中心</a></li>
											<li><a href="#">订单中心</a></li>
											<li><a href="${pageContext.request.contextPath}/video/to_upload">视频上传</a>
										</c:otherwise>
									</c:choose>
									<li><a href="${pageContext.request.contextPath}/users/outuser">退出账号</a></li>
								</ul>
							</li>
						</ul>
					</c:otherwise>
				</c:choose>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
	</nav>
	<script>
		$('.login_submit').click(function() {
			$.ajax({
				url : "${pageContext.request.contextPath}/users/login",
				type : "post", //提交方式，post或get
				async : true, //同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
				datatype : 'text',
				data : {
					username : $("#input_username").val(),
					password : $("#input_password").val(),
				}, //提交的请求参数，是键值对，用：隔开
				success : function(redata) { //请求成功的回调函数，参数是响应的返回值
					if ('error' == redata) {
						$('#loginMsg').html("账号或密码错误");
						$("#input_password").val('');
					} else if ('success' == redata) {
						window.location.reload();
					}
				}
			});
		});
		
		
		$('.add_submit').click(function(){
			var str = $("#username_register").val();
			var pwd = $("#password_register").val();
		    var ret = /^[a-zA-Z][a-zA-Z0-9_]{6,12}$/;
		    var ret2 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
		    
			if(ret.test(str)) {
				if(ret2.test(pwd)) {
					user_register(); 
				} else {
					$('#addMsg').html("注册失败，密码长度必须为6-12位");
					$("#password_register").val('');		
				}
			}else{
				$('#addMsg').html("注册失败，账号格式错误,或用户名已重复");
					$("#username_register").val('');
 					$("#password_register").val('');	
			}
			
		});
		
		function user_register() {
			$.ajax({
	            url:"${pageContext.request.contextPath}/users/add",
	            type:"post",  //提交方式，post或get
		 		    async:true, 	//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
	            	datatype:'text',//类型
		 			data:{
		 				username: $("#username_register").val(),//获取username的值
		 				password: $("#password_register").val(),//获取password的值
		 				},  //提交的请求参数，是键值对，用：隔开
		 			success:function(redata){ //请求成功的回调函数，参数是响应的返回值
		 				if('error' == redata) {
		 					$('#addMsg').html("注册失败，账号格式错误,或用户名已重复");
		 				} else if('success' == redata){
		 					$('#addMsg').html("注册成功,请点击登录");
		 				} 
		 				$("#username_register").val('');
	 					$("#password_register").val('');
		 			}
	        });
		};
		</script>
</body>
</html>